<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html元素选择器</title>
    <style type="text/css">
        /*类选择器的优先级大于html的标签选择器*/
        /*父元素的样式会被子元素继承下来 字体 文本【大小边框不继承】*/
        body{
            color:orangered;
        }
        .span-news{
            font-weight: bold;
            background-color: magenta;
            color:black;
        }
        #span-news-tb{
            background-color: #999999;
            font-size: 25px;
            font-weight: bold;
        }
        span{
            color:red;
        }
        p{
            color:royalblue;
            font-size: 28px;
            background-color: lightpink;
        }
    </style>
</head>
<body>
<!--
html标签名称{
    属性名：属性值；
    属性名：属性值；
    属性名：属性值；
}
-->
你好，北京！
<span class="span-news">新闻一</span>
<span class="span-news">新闻一</span>
<span class="span-news">新闻一</span>
<span class="span-news">新闻一</span>
<span class="span-news">新闻一</span>
<hr>
<!--
细节：一般来说 id选择器是提供给某一个html元素来使用
     当我们不确定有多少个元素使用该样式时，请使用类选择器
-->
<span id="span-news-tb">这是一则比较重要的新闻</span>
<p>hello,world!</p>
<p>hello,world!</p>
<p>hello,world!</p>
<p>hello,world!</p>
<p>hello,world!</p>
</body>
</html>